<template>
	<view class="wanfa flex-r ac">
		<!-- 总进球 -->
		<view class="wanfa-jq" v-if="type == 'jq'">
			<view class="wanfa-item">
				<view class="wanfa-head">
					<view class="title color-grey">
						总进球
					</view>
				</view>
				<view class="wanfa-content">
					<view class="wanfa-detail" v-for="(item,index) in scores.name.slice(0, 4)" :key="index" :class="getActiveClass(scores, index)">
						<view class="left" v-if="scores.finish == 1">
							<template v-if="scores.forecastResult && scores.forecastResult[index] == 1 && scores.result">
								<image v-if="scores.matchResult != null && scores.matchResult == index" class="icon" src="@/public/images/public/t_h.png" mode="aspectFit"></image>
								<image v-if="scores.matchResult != null && scores.matchResult != index || scores.result == 3" class="icon" src="@/public/images/public/t_hu.png" mode="aspectFit"></image>
							</template>
						</view>
						<view class="center flex-c">
							<view class="name">
								{{ item }}
							</view>
							<view class="score color-blue">
								{{ scores.zs[index] }}
							</view>
						</view>
						<view class="right" v-if="scores.finish == 1">
							<template v-if="scores.matchResult!=null && scores.matchResult == index">
								<image v-if="scores.result == 1" class="icon" src="@/public/images/public/dh_b.png" mode="aspectFit"></image>
								<image v-if="scores.result == 2" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
								<image v-if="scores.result == null" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
							</template>
						</view>
					</view>
				</view>
			</view>
			<view class="wanfa-item">
				<view class="wanfa-head">
					<view class="title color-grey">
						总进球
					</view>
				</view>
				<view class="wanfa-content">
					<view class="wanfa-detail" v-for="(item,index) in scores.name.slice(4, 8)" :key="index" :class="getActiveClass(scores, index+4)">
						<view class="left" v-if="scores.finish == 1">
							<template v-if="scores.forecastResult && scores.forecastResult[index+4] == 1 && scores.result">
								<image v-if="scores.matchResult!=null && scores.matchResult == index+4" class="icon" src="@/public/images/public/t_h.png" mode="aspectFit"></image>
								<image v-if="scores.matchResult!=null && scores.matchResult != index+4 || scores.result == 3" class="icon" src="@/public/images/public/t_hu.png" mode="aspectFit"></image>
							</template>
						</view>
						<view class="center flex-c">
							<view class="name">
								{{ item }}
							</view>
							<view class="score color-blue">
								{{ scores.zs[index+4] }}
							</view>
						</view>
						<view class="right" v-if="scores.finish == 1">
							<template v-if="scores.matchResult!=null && (scores.matchResult == index+4 || (scores.matchResult >= 7 && index+4 == 7))">
								<image v-if="scores.result == 1" class="icon" src="@/public/images/public/dh_b.png" mode="aspectFit"></image>
								<image v-if="scores.result == 2" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
								<image v-if="scores.result == null" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 大小球 -->
		<view class="wanfa-dxq" v-if="type == 'dxq'">
			<view class="wanfa-head">
				<view class="title">
					大小球
				</view>
			</view>
			<view class="wanfa-content">
				<view class="wanfa-detail" v-for="(item,index) in scores.name" :key="index" :class="getActiveClass(scores, index)">
					<view class="left" v-if="index != 1 && scores.finish == 1">
						<template v-if="scores.forecastResult && scores.forecastResult[index] == 1 && scores.result">
							<image v-if="scores.matchResult && scores.matchResult[index] == 1" class="icon" src="@/public/images/public/t_h.png" mode="aspectFit"></image>
							<image v-if="scores.matchResult && scores.matchResult[index] == 0 || scores.result == 3" class="icon" src="@/public/images/public/t_hu.png" mode="aspectFit"></image>
						</template>
					</view>
					<view class="center flex-c">
						<view class="name">
							{{ item }}
						</view>
						<view class="score color-blue">
							{{ scores.zs[index] }}
						</view>
					</view>
					<view class="right" v-if="index != 1 && scores.finish == 1">
						<template v-if="scores.matchResult && scores.matchResult[index] == 1">
							<image v-if="scores.result == 1" class="icon" src="@/public/images/public/dh_b.png" mode="aspectFit"></image>
							<image v-if="scores.result == 2" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
							<image v-if="scores.result == null" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
						</template>
					</view>
				</view>
			</view>
		</view>
		<!-- 胜平负 -->
		<view class="wanfa-spf" v-if="type == 'spf'">
			<view class="wanfa-head">
				<view class="name color-grey">
					胜平负
				</view>
			</view>
			<view class="wanfa-content">
				<view class="wanfa-detail" v-for="(item,index) in scores.name" :key="index" :class="getActiveClass(scores, index)">
					<view class="left" v-if="scores.finish == 1">
						<template v-if="scores.forecastResult && scores.forecastResult[index] == 1 && scores.result">
							<image v-if="scores.matchResult && scores.matchResult[index] == 1" class="icon" src="@/public/images/public/t_h.png" mode="aspectFit"></image>
							<image v-if="scores.matchResult && scores.matchResult[index] == 0 || scores.result == 3" class="icon" src="@/public/images/public/t_hu.png" mode="aspectFit"></image>
						</template>
					</view>
					<view class="center flex-c">
						<view class="name">
							{{ item }}
						</view>
						<view class="score color-blue">
							{{ scores.zs[index] }}
						</view>
					</view>
					<view class="right" v-if="scores.finish == 1">
						<template v-if="scores.matchResult && scores.matchResult[index] == 1">
							<image v-if="scores.result == 1" class="icon" src="@/public/images/public/dh_b.png" mode="aspectFit"></image>
							<image v-if="scores.result == 2" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
							<image v-if="scores.result == null" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
						</template>
					</view>
				</view>
			</view>
		</view>
		<!-- 让球胜平负 -->
		<view class="wanfa-rqspf" v-if="type == 'rqspf'">
			<view class="wanfa-head" v-for="(item,index) in scores.name.slice(0,1)" :key="index">
				<view class="name">
					{{ item }}
				</view>
				<view class="score">
					<text class="color-grey">主</text><text class="color-blue">{{ scores.zs[index] }}</text>
				</view>
			</view>
			<view class="wanfa-content">
				<view class="wanfa-detail" v-for="(item,index) in scores.name.slice(1, 4)" :key="index" :class="getActiveClass(scores, index+1)">
					<view class="left" v-if="scores.finish == 1">
						<template v-if="scores.forecastResult && scores.forecastResult[index+1] == 1 && scores.result">
							<image v-if="scores.matchResult && scores.matchResult[index+1] == 1" class="icon" src="@/public/images/public/t_h.png" mode="aspectFit"></image>
							<image v-if="scores.matchResult && scores.matchResult[index+1] == 0 || scores.result == 3" class="icon" src="@/public/images/public/t_hu.png" mode="aspectFit"></image>
						</template>
					</view>
					<view class="center flex-c">
						<view class="name">
							{{ item }}
						</view>
						<view class="score color-blue">
							{{ scores.zs[index+1] }}
						</view>
					</view>
					<view class="right" v-if="scores.finish == 1">
						<template v-if="scores.matchResult && scores.matchResult[index+1] == 1">
							<image v-if="scores.result == 1" class="icon" src="@/public/images/public/dh_b.png" mode="aspectFit"></image>
							<image v-if="scores.result == 2" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
							<image v-if="scores.result == null" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
						</template>
					</view>
				</view>
			</view>
		</view>
		<!-- 让球胜负 -->
		<view class="wanfa-rqsf" v-if="type == 'rqsf'">
			<view class="wanfa-head">
				<view class="title color-grey">
					让球胜负
				</view>
			</view>
			<view class="wanfa-content">
				<view class="wanfa-detail" v-for="(item,index) in scores.name" :key="index" :class="getActiveClass(scores, index)">
					<view class="left" v-if="scores.finish == 1">
						<template v-if="scores.forecastResult && scores.forecastResult[index] == 1 && scores.result && index != 1">
							<image v-if="scores.matchResult && scores.matchResult[index] == 1" class="icon" src="@/public/images/public/t_h.png" mode="aspectFit"></image>
							<image v-if="scores.matchResult && scores.matchResult[index] == 0 || scores.result == 3" class="icon" src="@/public/images/public/t_hu.png" mode="aspectFit"></image>
						</template>
					</view>
					<view class="center flex-c">
						<view class="name">
							{{ item }}
						</view>
						<view class="score color-blue">
							<template v-if="index==1">
								<template v-if="scores.zs[index] >= 0">
									<text class="color-grey">主</text><text>-{{ scores.zs[index] }}</text>
								</template>
								<template v-else>
									<text class="color-black">客</text><text>{{ scores.zs[index] }}</text>
								</template>
							</template>
							<text v-else>{{ scores.zs[index] }}</text>
						</view>
					</view>
					<view class="right" v-if="scores.finish == 1">
						<template v-if="scores.matchResult && scores.matchResult[index] == 1 && index != 1">
							<image v-if="scores.result == 1" class="icon" src="@/public/images/public/dh_b.png" mode="aspectFit"></image>
							<image v-if="scores.result == 2" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
							<image v-if="scores.result == null" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
						</template>
					</view>
				</view>
			</view>
		</view>
		<!-- 让分胜负 -->
		<view class="wanfa-rfsf" v-if="type == 'rfsf'">
			<view class="wanfa-head">
				<view class="title color-grey">
					让分胜负
				</view>
			</view>
			<view class="wanfa-content">
				<view class="wanfa-detail" v-for="(item,index) in scores.name" :key="index" :class="getActiveClass(scores, index)">
					<view class="left" v-if="scores.finish == 1">
						<template v-if="scores.forecastResult && scores.forecastResult[index] == 1 && scores.result">
							<image v-if="scores.matchResult && scores.matchResult[index] == 1" class="icon" src="@/public/images/public/t_h.png" mode="aspectFit"></image>
							<image v-if="scores.matchResult && scores.matchResult[index] == 0 || scores.result == 3" class="icon" src="@/public/images/public/t_hu.png" mode="aspectFit"></image>
						</template>
					</view>
					<view class="center flex-c">
						<view class="name">
							{{ item }}
						</view>
						<view class="score" v-if="index == 0">
							<text class="color-grey">主</text><text class="color-blue">{{ scores.zs[index] }}</text>
						</view>
						<!-- <view class="score color-blue" v-else>
							{{ scores.zs[index] }}
						</view> -->
						<div class="score color-blue" v-else-if="index == 1">
							{{ scores.zs[2] }}
						</div>
						<div class="score color-blue" v-else-if="index == 2">
							{{ scores.zs[1] }}
						</div>
					</view>
					<view class="right" v-if="scores.finish == 1">
						<template v-if="scores.matchResult && scores.matchResult[index] == 1">
							<image v-if="scores.result == 1" class="icon" src="@/public/images/public/dh_b.png" mode="aspectFit"></image>
							<image v-if="scores.result == 2" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
							<image v-if="scores.result == null" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
						</template>
					</view>
				</view>
			</view>
		</view>
		<!-- 大小分 -->
		<view class="wanfa-dxf" v-if="type == 'dxf'">
			<view class="wanfa-head">
				<view class="title">
					大小分
				</view>
			</view>
			<view class="wanfa-content">
				<view class="wanfa-detail" v-for="(item,index) in scores.name" :key="index" :class="getActiveClass(scores, index)">
					<view class="left" v-if="index != 1 && scores.finish == 1">
						<template v-if="scores.forecastResult && scores.forecastResult[index] == 1 && scores.result">
							<image v-if="scores.matchResult && scores.matchResult[index] == 1" class="icon" src="@/public/images/public/t_h.png" mode="aspectFit"></image>
							<image v-if="scores.matchResult && scores.matchResult[index] == 0 || scores.result == 3" class="icon" src="@/public/images/public/t_hu.png" mode="aspectFit"></image>
						</template>
					</view>
					<view class="center flex-c">
						<view class="name">
							{{ item }}
						</view>
						<view class="score color-blue">
							{{ index == 0 ? scores.zs[1] : (index == 1 ? scores.zs[0] : scores.zs[index]) }}
						</view>
					</view>
					<view class="right" v-if="index != 1 && scores.finish == 1">
						<template v-if="scores.matchResult && scores.matchResult[index] == 1">
							<image v-if="scores.result == 1" class="icon" src="@/public/images/public/dh_b.png" mode="aspectFit"></image>
							<image v-if="scores.result == 2" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
							<image v-if="scores.result == null" class="icon" src="@/public/images/public/dh_h.png" mode="aspectFit"></image>
						</template>
					</view>
				</view>
			</view>
		</view>
		<!-- 预测结果 -->
		<template v-if="scores.result && scores.finish == 1">
			<view class="result" :class="{'jq': type=='jq'}">
				<image class="res-icon" src="@/public/images/public/cz.png" mode="aspectFit" v-if="scores.result == 1"></image>
				<image class="res-icon" src="@/public/images/public/wcz.png" mode="aspectFit" v-if="scores.result == 2"></image>
				<image class="res-icon" src="@/public/images/public/zs.png" mode="aspectFit" v-if="scores.result == 3"></image>
			</view>
		</template>
	</view>
</template>

<script>
	/**
	 * WanFa 玩法
	 * @description 方案详情比赛指数玩法
	 * @property {String} type = [jq|dxq|spf|rqspf|rqsf|rfsf|dxf] 玩法类型
	 * @property {Object} scores 玩法数据对象
	 * @example <WanFa type="jq" :scores="scores"></WanFa>
	 */
	export default {
		name: "WanFa",
		props: {
			type: {
				type: String,
				default: ""
			},
			scores: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			/**
			 * @description 获取class
			 * @param {object} scores 玩法数据
			 * @param {number} index 预测选项索引
			 * @return {string} 是否选中的class = [active|no-active]
			 */
			getActiveClass(scores, index) {
				if(scores.forecastResult && scores.forecastResult[index] == 1 && scores.finish == 1){
					if(scores.matchResult == null && scores.result == null){//没有比赛结果时显示命中
						return 'active'
					}else if(scores.matchResult == null && scores.result == 3){//料结果走水时显示未命中
						return 'no-active'
					}else if(scores.matchResult != null && this.type == 'jq'){//大小球
						if(scores.matchResult >= 7 && index == 7){//7个球以上的命中情况
							return 'avtive'
						}else if(scores.matchResult == index){//命中
							return 'active'
						}else{//未命中
							return 'no-active'
						}
					}else if(scores.matchResult != null && scores.matchResult[index] == 1){//命中
						return 'active'
					}else if(scores.matchResult != null && scores.matchResult[index] == 0){//未命中
						return 'no-active'
					}
				}else{//没有预测数据不显示是否命中
					return ''
				}
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	$detail-height: 72rpx;
	$head-width: 136rpx;
	$active-color: #0055FF;
	$noactive-color: #8FA5CC;
	.wanfa{
		width: 100%;
		user-select:none;;
		border-bottom: solid #fff 2rpx;
		position: relative;
		.name{
			font-size: 22rpx;
		}
		.score{
			margin-top: 9rpx;
			font-size: 20rpx;
		}
		.wanfa-head{
			width: $head-width;
			height: $detail-height;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #F4F8FF;
			box-sizing: border-box;
			.title{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 22rpx;
				color: #999999;
			}
		}
		.wanfa-content{
			flex: 2;
			display: flex;
			flex-direction: row;
			height: $detail-height;
			background: #F4F8FF;
			.wanfa-detail{
				flex: 2;
				box-sizing: border-box;
				border-left: solid #fff 2rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.left{
					align-self: flex-start;
					margin-left: 10rpx;
					width: 32rpx;
					.icon{
						width: 32rpx;
						height: 32rpx;
					}
				}
				.right{
					margin-right: 10rpx;
					width: 26rpx;
					.icon{
						width: 26rpx;
						height: 24rpx;
					}
				}
				.center{
					flex: 2;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.result{
			position: absolute;
			left: -10rpx;
			height: 40rpx;
			width: 40rpx;
			.res-icon{
				height: 40rpx;
				width: 40rpx;
			}
		}
	}
	.wanfa-jq{
		flex: 2;
		display: flex;
		flex-direction: column;
		.wanfa-item{
			height: $detail-height;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.wanfa-item:nth-child(n+2){
			border-top: solid #fff 2rpx;
		}
	}
	.wanfa-dxq, .wanfa-spf, .wanfa-rqspf, .wanfa-rqsf, .wanfa-rfsf, .wanfa-dxf {
		flex: 2;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.no-active, .active{
		color: #FFFFFF;
		.score{
			color: #FFFFFF;
		}
	}
	.active{
		background-color: $active-color;
	}
	.no-active{
		background: $noactive-color;
	}
</style>

